<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康体检预约</title>
    <style>
        * {
            box-sizing: border-box;
            font-family: 'Segoe UI', sans-serif;
        }

        body {
            background-color: #f5f7fa;
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 40px auto;
            background: white;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
        }

        .header h1 {
            color: #2c7be5;
            margin: 0;
        }

        .menu-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }

        .menu-item {
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            transition: transform 0.3s;
        }

        .menu-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
        }

        .menu-item h2 {
            margin: 0 0 10px;
            color: #2c7be5;
        }

        .menu-item p {
            margin: 0 0 15px;
            color: #4a5568;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
            position: relative;
            cursor: pointer;
        }

        .menu-item p::after {
            content: attr(data-tooltip);
            visibility: hidden;
            width: 250px;
            background-color: white;
            color: #4a5568;
            text-align: center;
            border-radius: 6px;
            padding: 10px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -125px;
            opacity: 0;
            transition: opacity 0.3s;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            white-space: normal;
            word-wrap: break-word;
        }

        .menu-item p::before {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: white transparent transparent transparent;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .menu-item p:hover::after,
        .menu-item p:hover::before {
            visibility: visible;
            opacity: 1;
        }

        .menu-item button {
            background: #2c7be5;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            width: 100%;
            transition: opacity 0.3s;
        }

        .menu-item button:hover {
            opacity: 0.9;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: white;
            margin: 15% auto;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            width: 90%;
            max-width: 500px;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            color: #4a5568;
            font-weight: 600;
        }

        input {
            width: 100%;
            padding: 10px;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        input:focus {
            border-color: #2c7be5;
            outline: none;
        }

        .modal button {
            width: 100%;
            background: #2c7be5;
            color: white;
            padding: 14px 28px;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            transition: opacity 0.3s;
        }

        .modal button:hover {
            opacity: 0.9;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
<div class="container">
    <div class="header">
        <h1>健康体检预约</h1>
        <p>请选择您想要预约的体检套餐</p>
    </div>

    <div class="menu-grid" id="menuGrid">
        <!-- 体检套餐将动态插入到这里 -->
    </div>
</div>

<!-- 预约模态框 -->
<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>预约信息</h2>
        <form id="appointmentForm">
            <div class="form-group">
                <label for="name">姓名：</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="inhabitantId">身份证号：</label>
                <input type="text" id="inhabitantId" name="inhabitantId" pattern="\d{15}|\d{18}" required>
            </div>
            <div class="form-group">
                <label for="time">预约日期：</label>
                <input type="date" id="time" name="time" required>
            </div>
            <button type="submit">提交预约</button>
        </form>
    </div>
</div>

<script>
    // 从 cookie 中获取指定名称的值
    function getCookie(name) {
        const value = `; ${document.cookie}`;
        const parts = value.split(`; ${name}=`);
        if (parts.length === 2) return parts.pop().split(';').shift();
    }

    // 初始化
    function init() {
        fetchMenuItems();
        setupModal();
    }

    // 获取体检套餐数据
    function fetchMenuItems() {
        const token = getCookie('token');
        $.ajax({
            url: '/user/pay/getInfo',
            method: 'GET',
            headers: {
                'Authorization': token
            },
            dataType: 'json',
            success: function (data) {
                if (data.code === 200) {
                    renderMenuItems(data.data);
                } else {
                    showToast('获取套餐信息失败！');
                }
            },
            error: function () {
                document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
                window.location.href = 'http://localhost:5173';
                showToast('请求失败，请稍后再试！');
            }
        });
    }

    // 渲染体检套餐
    function renderMenuItems(items) {
        const grid = $('#menuGrid');
        grid.empty();
        items.forEach(item => {
            const priceInYuan = (item.price / 100).toFixed(2);
            grid.append(`
                <div class="menu-item">
                    <h2>${item.name}</h2>
                    <p data-tooltip="${item.item}">${item.item}</p>
                    <p>价格：${priceInYuan}元</p>
                    <button data-product-id="${item.id}">预约</button>
                </div>
            `);
        });
    }

    // 设置模态框操作
    function setupModal() {
        const modal = $('#myModal');
        const closeBtn = $('.close');

        $(document).on('click', '.menu-item button', function () {
            const productId = $(this).data('product-id');
            showModal(productId);
        });

        closeBtn.on('click', function () {
            hideModal();
        });

        $(window).on('click', function (event) {
            if ($(event.target).is(modal)) {
                hideModal();
            }
        });

        $('#appointmentForm').on('submit', function (event) {
            event.preventDefault();
            handleSubmit(event);
        });
    }

    // 显示模态框
    function showModal(productId) {
        $('#myModal').css('display', 'block');
        $('#appointmentForm')[0].reset();
        $('#appointmentForm').data('productId', productId);
    }

    // 隐藏模态框
    function hideModal() {
        $('#myModal').css('display', 'none');
    }

    // 提交预约信息到服务器
    function handleSubmit(event) {
        event.preventDefault();

        const formData = {
            name: $('#name').val().trim(),
            inhabitantId: $('#inhabitantId').val().trim(),
            time: $('#time').val()
        };

        const productId = $('#appointmentForm').data('productId');
        const url = `/user/pay/${productId}`;
        const method = 'POST';

        const token = getCookie('token');
        $.ajax({
            url: url,
            method: method,
            contentType: 'application/json',
            data: JSON.stringify(formData),
            headers: {
                'Authorization': token
            },
            success: function (data) {
                if (data.code === 200) {
                    hideModal();
                    document.write(data.data);
                } else {
                    showToast('预约失败，请重试');
                }
            },
            error: function () {
                document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
                window.location.href = 'http://localhost:5173';
                showToast('请求失败，请稍后再试！');
            }
        });
    }

    // 显示成功提示
    function showToast(message) {
        const toast = $('<div>').addClass('toast').text(message);
        $('body').append(toast);

        setTimeout(() => {
            toast.remove();
        }, 2000);
    }

    // 页面加载时初始化
    $(document).ready(init);
</script>
</body>

</html>
